<template>
  <div :style="styleConfig">
    <a-button type="primary" style="margin: 10px 0px 15px 15%;width:120px" @click="addQingdan">添加</a-button>
    <a-table bordered :pagination="false" :dataSource="reportConfig" rowKey="key" :columns="columnsReportConfig" size="small" style="width:70%;margin:0 15%">

    </a-table>
    <a-modal title="添加清单类型" :width="600" :visible="visitableQingdan" @ok="handleOk" @cancel="handleCancel">

      <a-form-model :model="reportConfigForm" layout="inline" ref="ruleCustomerForm" :rules="rulesReportConfig" class="cycReportConfig" style="">
        <!-- <a-row class="xzkh">
          <a-col :span="24" class="gsqc gsjc_col_onespan" style="display:flex;margin-left:12px"> -->
        <a-form-model-item style="" label="清单类型" prop="nameType" ref="nameType">
          <a-input style="width:400px" v-model="reportConfigForm.nameType" placeholder="请输入清单类型" />
        </a-form-model-item>

        <a-form-model-item label="接口地址" prop="url" ref="url">
          <a-input :maxLength="6" style="width:400px" v-model="reportConfigForm.url" placeholder="请输入接口上传地址(联系开发人员获取)" />
        </a-form-model-item>

        <!-- <a-form-model-item label="备注">
              <a-input :read-only="true" v-model="reportConfigForm.desc" placeholder disabled />
            </a-form-model-item> -->
        <!-- <a-divider /> -->
      </a-form-model>

    </a-modal>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      rulesReportConfig: {
        nameType: [{ required: true, message: '请填清单类型', trigger: 'blur' }],
        url: [{ required: true, message: '请填写接口上传地址(联系开发人员获取)', trigger: 'blur' }],
      },
      reportConfigForm: {},
      styleConfig: {
        'background-color': '#fff',
        width: '100%',
        padding: '10px 0 10px 0',
      },
      columnsReportConfig,
      reportConfig: [],
      visitableQingdan: false,
    }
  },
  filters: {},
  created() {
    // this.styleConfig = 'background-color:#fff;width:100%;padding:10px 0 10px 0;'
    let clientHeight = `${document.documentElement.clientHeight}` - 110 //
    this.styleConfig.height = clientHeight + 'px'
    let lins = [
      {
        id: 99999,
        type: '开通数据',
        nameType: '查勘清单(原始)', //查勘清单(原始)
        url: '/api/import/manage/survey',
        action: '',
      },
      {
        id: 99998,
        type: '开通数据',
        nameType: '客经联系清单', // 客经清单
        url: '/api/import/manage/kqjd',
        action: '',
      },
      {
        id: 99997,
        type: '企宽数据',
        nameType: '施调企宽清单', //综合及时率报表-企宽
        url: '/api/import/manage/evaluation_warning',
        action: '',
      },
    ]
    this.reportConfig = lins
  },
  computed: {
    // rowSelection() {
    //   return {
    //     selectedRowKeys: this.selectedRowKeys,
    //     onChange: this.onSelectChange,
    //   }
    // },
  },
  methods: {
    //添加清单
    addQingdan() {
      this.visitableQingdan = true
    },
    handleCancel() {
      this.$refs['ruleCustomerForm'].resetFields() //清空红色部分
      this.visitableQingdan = false
    },
    handleOk() {
      this.$refs.ruleCustomerForm.validate((valid) => {
        if (valid) {
          this.visitableQingdan = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}

const columnsReportConfig = [
  {
    title: '清单类型',
    dataIndex: 'type',
    key: 'type',
    width: 100,
    align: 'center',
  },
  {
    title: '清单名称',
    dataIndex: 'nameType',
    key: 'nameType',
    width: 100,
    align: 'center',
  },
  {
    title: '接口上传地址',
    dataIndex: 'url',
    key: 'url',
    width: 100,
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 100,
    align: 'center',
  },
]
</script>
